<template>
	<view class="orders">
		<u-tabs :list="[{name: '当前订单'}, {name: '历史订单'}]" 
				lineColor="#333333"
				 duration="200"
				:itemStyle="{width: '50%',height: '30px',marginBottom: '5px',paddingTop: '5px'}"
				:scrollable="false"
				lineWidth="30"
				:activeStyle="{color: '#333333'}"
				:current="current_tab_index"
				@click="handle_change_tab"></u-tabs>
				
		<section class="orders-list current-orders" v-if="current_tab_index == 0">
			<view class="order-item">
				<view class="order-item-header">
					<span>订单号: 1001</span>
					<span class="order-status">已送达</span>
				</view>
				
				<view class="order-info">
					<view class="order-info-left">
						<view class="images-list">
							<image class="goods-cover" src="" mode=""></image>
							<image class="goods-cover" src="" mode=""></image>
						</view>
					</view>
					
					<view class="order-info-right">
						<view class="order-price">
							￥<span class="main-price">11</span>.5
						</view>
						<view class="goods-num">
							共2件
						</view>
					</view>
				</view>
				
				<view class="order-time">
					2024-03-22 14:52:18
				</view>
				
				<view class="operation-box">
					<view class="operation-btn">
						<u-button text="删除订单" type="info" size="small" shape="circle" @click="order_delete_visible = true"></u-button>
					</view>
					<view class="operation-btn">
						<u-button text="查看评价" type="info" size="small" shape="circle" @click="handle_check_evaluate"></u-button>
					</view>
					
				</view>
			</view>
			
			<view class="order-item">
				<view class="order-item-header">
					<span>订单号: 1001</span>
					<span class="order-status">已送达</span>
				</view>
				
				<view class="order-info">
					<view class="order-info-left">
						<view class="images-list">
							<image class="goods-cover" src="" mode=""></image>
							<image class="goods-cover" src="" mode=""></image>
						</view>
					</view>
					
					<view class="order-info-right">
						<view class="order-price">
							￥<span class="main-price">11</span>.5
						</view>
						<view class="goods-num">
							共2件
						</view>
					</view>
				</view>
				
				<view class="order-time">
					2024-03-22 14:52:18
				</view>
				
				<view class="operation-box">
					<view class="operation-btn">
						<u-button text="删除订单" type="info" size="small" shape="circle" @click="order_delete_visible = true"></u-button>
					</view>
					<view class="operation-btn">
						<u-button text="查看评价" type="info" size="small" shape="circle" @click="handle_check_evaluate"></u-button>
					</view>
					
				</view>
			</view>
		</section>
		
		<section class="orders-list history-orders" v-if="current_tab_index == 1">
			<view class="order-item">
				<view class="order-item-header">
					<span>订单号: 1001</span>
					<span class="order-status">已送达</span>
				</view>
				
				<view class="order-info">
					<view class="order-info-left">
						<view class="images-list">
							<image class="goods-cover" src="" mode=""></image>
							<image class="goods-cover" src="" mode=""></image>
						</view>
					</view>
					
					<view class="order-info-right">
						<view class="order-price">
							￥<span class="main-price">11</span>.5
						</view>
						<view class="goods-num">
							共2件
						</view>
					</view>
				</view>
				
				<view class="order-time">
					2024-03-22 14:52:18
				</view>
				
				<view class="operation-box">
					<view class="operation-btn">
						<u-button text="删除订单" type="info" size="small" shape="circle" @click="order_delete_visible = true"></u-button>
					</view>
					<view class="operation-btn">
						<u-button text="查看评价" type="info" size="small" shape="circle" @click="handle_check_evaluate"></u-button>
					</view>
					
				</view>
			</view>
		</section>
	</view>
	
	<u-modal :show="order_delete_visible" title="温馨提示" 
										content='是否确认删除此订单?' 
										showCancelButton 
										cancelText="取消" 
										confirmColor="#333333"
										@confirm="handle_delete_order"
										@cancel="() => {order_delete_visible = false}"
										></u-modal>
	
	<tabBar></tabBar>
</template>

<script setup>
	import tabBar from "../components/tab_bar.vue"
	import { ref } from "vue"
	
	const current_tab_index = ref(0);
	const handle_change_tab = (obj) => {
		console.log(obj)
		current_tab_index.value = obj.index
	}
	
	const current_order_id = ref(null);	
	
	
	// 获取全部订单
	const fetch_orders = async () => {
		const res = await get_orders({
			user_id: ""
		})
		
		console.log("############## 获取全部订单 #############");
		console.log(res)
		
	}
	
	// 删除订单
	const order_delete_visible = ref(false);
	const handle_delete_order = () => {
		if(!current_order_id){return}
		
	}
	
	// 查看评价
	const handle_check_evaluate = () => {
		uni.navigateTo({
			url: "/pages/tank/orders/evaluate",
			animationType: "fade-in",
			animationDuration: 200
		});
	}
	
</script>

<style lang="scss">
	.orders{
		width: 100%;
		height: calc(100vh - 50px);
		background-color: #f3f4f6;
		
		.orders-list{
			width: 100%;
			height: fit-content;
			padding: 24rpx;
			box-sizing: border-box;
			
			.order-item{
				width: 100%;
				height: fit-content;
				background-color: #fff;
				border-radius: 8px;
				padding: 24rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				
				.order-item-header{
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-size: 30rpx;
					color: #333333;
					
					.order-status{color: #999999;font-size: 26rpx;}
				}
				
				.order-info{
					width: 100%;
					height: fit-content;
					min-height: 150rpx;
					margin-top: 10rpx;
					display: flex;;
					justify-content: space-between;
					
					.order-info-left{
						width: calc(100% - 150rpx);
						height: fit-content;
						
						.images-list{
							width: 100%;
							height: 120rpx;
							overflow-x: scroll;
							
							.goods-cover{
								width: 120rpx;
								height: 120rpx;
								border-radius: 16rpx;
								object-fit: cover;
								margin-right: 10rpx;
								display: inline-block;
								background: #f3f4f6;
							}
							
							
						}
						
					}
					.order-info-right{
						width: 100rpx;
						height: fit-content;
						box-sizing: border-box;
						
						.order-price{
							width: 100%;
							height: 40rpx;
							font-size: 24rpx;
							color: #333333;
							margin-top: 20rpx;
							display: flex;
							align-items: center;;
							justify-content: center;;
							
							.main-price{font-size: 28rpx}
						}
						
						.goods-num{
							width: 100%;
							height: fit-content;;
							font-size: 24rpx;
							color: #999999;
							text-align: center;
							
						}
						
					}
				}
				
				.order-time{width: 100%;;color: #999999;font-size: 24rpx}
				
				.operation-box{
					width: 100%;
					height: 60rpx;
					display: flex;;
					justify-content: flex-end;
					margin-top: 20rpx;
					
					.operation-btn{
						width: 160rpx;
						height: 100%;
						margin-left: 20rpx;
					}
				}
				
				
			}
		
		}
	}
</style>